<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="target.html">
        <!--
            autocomplete设置为off，这样可以使得文本框不显示历史记录
            如果想全部关闭但是嫌麻烦，可以把autocomplete属性设置在form标签里
            readonly 将表单项设置为只读，也就是不能进行输入和修改，数据可以提交
            disabled 将表单项设置为禁用，此属性会让文本框无法点击，数据不能提交
            autofocus 设置表单项自动获取焦点，此属性会让文本框自动获取焦点
        -->
        文本框<input type="text" name="username" value="用户名" autocomplete="off">
        <br><br>
        
        <!--如果把name改成跟上面一样的username，那么就会继承上面文本框的历史记录-->
        文本框<input type="text" name="username">
        <br><br>
        
        文本框<input type="text" name="b" readonly>
        <br><br>

        文本框<input type="text" name="b" disabled>
        <br><br>

        文本框<input type="text" name="b" autofocus>
        <br><br>
        
        <!--调色板功能-->
        调色板<input type="color">
        <br><br>
        
        提交键<input type="submit">
        <br><br>
        
        <!--此文本框自带E-Mail链接检查方法-->
        E-Mail文本框<input type="email">
        <br><br>
        
        <!--
            type="button"普通的按钮
            唯一功能就是绑定单击事件
        -->
        普通按钮<input type="button" value="按钮">
        <br><br>
       
        <!--重置按钮-->
        重置按钮<input type="reset">
        <br><br>
        
        <button type="submit">提交</button>
        <br><br>
        
        <button type="reset">重置</button>
        <br><br>
        
        <button type="button">按钮</button>
        <br><br>

        <!--
            button和input的效果都差不多，但是button是双标签，在使用过上相对更灵活
        -->
    </form>
</body>
</html>